<template>
	<view class="all">
		<navbar class="navbar" @updateHeight="updateNavbarHeight">

		</navbar>
		<!-- <image class="logo" src="../../static/reallogo.png" mode=""></image> -->
		<view class="content" :style="{ paddingTop: navbarHeight + 'rpx' }">
			<view class="title" style="margin-left: 40rpx;pre-wrap;">{{msg}}</view>
			<view @click="navigatorTo2" class="user">
				<!-- <view class="text">Personal</view> -->
				<image class="user-icon" src="../../static/resource/yumi-image/5.jpg" mode=""></image>
				<view class="text">{{ nickname }}</view>
			</view>
		</view>
		<view class="container">
			<view class="grid-item" @click="to1">
				<image class="img" src="../../static/resource/yumi-image/10.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Pollen Dispersal</text>
			</view>
			<view class="grid-item" @click="to2">
				<image class="img" src="../../static/resource/yumi-image/11.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Dispersal Time</text>
				<view class="shouyezhanwei"></view>
			</view>
			<view class="grid-item" @click="to3">
				<image class="img" src="../../static/resource/yumi-image/8.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Anther Emergence</text>
			</view>
			<view class="grid-item" @click="to4">
				<image class="img" src="../../static/resource/yumi-image/9.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Seed Setting</text>
				<view class="shouyezhanwei"></view>
			</view>
			<view class="grid-item" @click="to5">
				<image class="img" src="../../static/resource/yumi-image/10.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Ear rot</text>
			</view>
			<view class="grid-item" @click="to6">
				<image class="img" src="../../static/resource/yumi-image/11.jpg" mode="aspectFill"></image>
				<text class="shouyetitle">Stalk Rot</text>
				<view class="shouyezhanwei"></view>
			</view>
			<button v-if="iflogin" class="btn" @click="navigatorTo1">Login/Register</button>
		</view>
	</view>

</template>



<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const iflogin = ref(true);
	const token = ref(null);
	// 获取登录令牌并返回一个 Promise
	const getToken = () => {
		return new Promise((resolve, reject) => {
			uni.getStorage({
				key: 'user-data',
				success: (res) => {
					if (res.data && res.data.token) {
						token.value = res.data.token;
						console.log('获取到的令牌:', token.value);
						resolve(token);
					} else {
						console.log('没有找到登录令牌，设置为 null');
						token.value = null; // 设置为 null  
						resolve(null);
					}
				},
				fail: (err) => {
					console.error('获取令牌失败:', err);
					token.value = null; // 设置为 null  
					reject(err);
				},
			});
		});
	};
	var nickname = ref('');
	const getname = () => {
		//获取用户昵称
		uni.getStorage({
			key: 'user-data',
			success: (res) => {
				const data1 = res.data;
				nickname.value = data1.name;
			}
		})
	}
	onShow(async () => {
		try {
			await getToken(); // 等待 getToken 完成  
			await getname();
			iflogin.value = !token.value; // 更新 iflogin 的值  
		} catch (error) {
			console.error('处理 token 失败:', error);
			iflogin.value = true; // 若获取失败，显示登录按钮  
		}
	});
	const msg = ref()
	onMounted(async () => {
		uni.request({
			url: 'https://maize.ltd/yumi/variable/page',
			success: (response) => {
				console.log('获取到的数据:', response.data);
				// msg.value = response.data.data
				msg.value = response.data.data.replace(/\\n/g, '\n');
			},
		})
	});





	const navbarHeight = ref(0);

	// Callback to receive height from navbar
	const updateNavbarHeight = (height) => {
		navbarHeight.value = height;
	};




	//跳转逻辑
	const navigatorTo1 = () => {
		uni.navigateTo({
			url: '/pages/sign/sign'
		})
	}

	const navigatorTo2 = () => {
		uni.navigateTo({
			url: '/pages/user/index'
		})
	}

	const to1 = () => {
		uni.switchTab({
			url: '/pages/project1/index'
		})
	}

	const to2 = () => {
		uni.switchTab({
			url: '/pages/project2/index'
		})
	}

	const to3 = () => {
		uni.switchTab({
			url: '/pages/project3/project3'
		})
	}

	const to4 = () => {
		uni.switchTab({
			url: '/pages/project4/index'
		})
	}
	const to5 = () => {
		// uni.navigateBack()
		uni.navigateTo({
			url: `/pages/project5/project5`,
		});
	}
	const to6 = () => {
		// uni.navigateBack()
		uni.navigateTo({
			url: `/pages/project6/project6`,
		});
	}
</script>

<style lang='less' scoped>
	/* 	* {
		background-color: #f0f0f0;

	} */
	.btn {
		background-color: #CFF0C8;
		width: 100%;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-top: 100rpx;
		margin-left: 350rpx;
		z-index: 9998;
	}

	.all {
		height: 100%;
	}

	.navbar {
		background-color: #f0f0f0;

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			margin-bottom: 40rpx;
			font-size: 50rpx;
			font-weight: 550;
			white-space: pre-wrap;
			margin-top: 20rpx;
		}

		.user {
			position: fixed;
			top: 100rpx;
			left: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx;
			/* border: 3rpx solid black;s */
			border-radius: 20rpx;
			/* background-color: #fff; */
			/* background-color: #cff0c8; */
			/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
			z-index: 9999;

			.user-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				/* margin-left: 10rpx; */
				border: 2rpx solid #000000;
			}

			.text {
				background-color: #cff0c8;
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}

		}
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;

		.grid-item {
			width: 30%;
			margin-bottom: 30rpx;

			text-align: center;
			border: 1.5rpx solid #4a4a4a;
			border-radius: 10rpx;
			box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
			background-color: #f0f0f0;

			.img {
				width: 100%;
				height: 180rpx;
				/* 图片整体缩小 */
				object-fit: cover;
				border-radius: 10rpx 10rpx 0 0;
				border-bottom: 1.5rpx solid #4a4a4a;
			}

			.shouyetitle {
				margin: 8rpx 0;
				/* 上下间距调整 */
				font-size: 24rpx;
				/* 字体大小调整 */
				font-weight: 400;
				color: #333;
				text-align: center;
				background-color: #f0f0f0;
			}

			.shouyezhanwei {
				height: 6rpx;
				/* 缩小占位高度 */
				border-radius: 0 0 10rpx 10rpx;
				background-color: #f0f0f0;
			}
		}
	}
</style>